<template>
    <pageTabelLayout>
        <template #pageHeader>

            <div class="search-form divClass" v-if="headerShow">
                <div>
                    <a-form :model="pageData" layout="inline" size="small">
                        <CorporateSectorCascader :style="{ width: '200px' }" :configCascader="configCascader"
                            @changeCascader="changeCascader" />
                        <a-form-item label="开单日期">
                            <a-date-picker  popup-container="html"  class="bacClass" v-model="pageData.beginDate" allow-clear style="width:200px" />
                        </a-form-item>
                        <a-form-item label="至" label-col-flex="66px">
                            <a-date-picker  popup-container="html"  class="bacClass" v-model="pageData.endDate" allow-clear style="width:242px" />
                        </a-form-item>
                        <!-- <a-form-item label="班次" label-col-flex="66px">
                            <a-input class="bacClass" v-model="pageData.shift" allow-clear style="width: 228px"></a-input>
                        </a-form-item>
                        <a-form-item label="班组">
                            <a-input class="bacClass" v-model="pageData.workteam" allow-clear
                                style="width: 200px"></a-input>
                        </a-form-item> -->
                        <a-form-item label="操作工序">
                            <a-input class="bacClass" v-model="pageData.process" allow-clear style="width: 200px"></a-input>
                            <!-- <a-select popup-container="html"  class="bacClass" :loading="loading" :allowClear="true" @search="handleSearch"
                                v-model="pageData.customName" :filter-option="false" allow-search @focus="focusSel"
                                style="width: 200px;">
                                <a-option v-for="item in pageData.nameList" :value="item['customName']">{{
                                    item['customName']
                                }}</a-option>
                            </a-select> -->
                        </a-form-item>
                        <a-form-item label="流转卡号">
                            <a-input class="bacClass" v-model="pageData.circulatCard" allow-clear
                                style="width: 200px"></a-input>
                        </a-form-item>
                        <a-form-item label="员工工号">
                            <a-input class="bacClass" v-model="pageData.userCode" allow-clear
                                style="width: 200px"></a-input>
                        </a-form-item>
                        <a-form-item label="员工姓名">
                            <a-input class="bacClass" v-model="pageData.userName" allow-clear
                                style="width: 200px"></a-input>
                        </a-form-item>
                    </a-form>
                </div>

            </div>
            <div style="float: right;">
                <Toolbar :items="toolbarList" @select="selectHandler">
                </Toolbar>
            </div>
            <div class="my-divisders">
                <a-divider orientation="center">
                    <icon-double-up v-if="headerShow" @click="headerShow = false" :strokeWidth="2" :size="18" />
                    <icon-double-down v-else @click="headerShow = true" :strokeWidth="2" :size="18" />
                </a-divider>
            </div>
        </template>
        <template #pageTabel>
            <!-- <a-tabs   :justify="true" :default-active-key="tabsKeys" @change="tabsChanges">
                <a-tab-pane> -->
            <AgGridVuesCopys :rowHeight="33" :headerHeight="33" :suppressCopyRowsToClipboard="true" rowSelection="multiple" @grid-ready="gridReady"
            style="height: calc(100% - 45px);" :defaultColDef="defaultColDef" class='ag-theme-alpine' :rowData="tableDataList"
                :columnDefs="tc" :localeText="localeText1"></AgGridVuesCopys>
            <paginationCopys :page-size-options="pagingList1" :total="total" show-total show-jumper show-page-size
                @change="PageSize" @page-size-change="change" style="justify-content: center"
                :page-size="pagination.pageSize" :current="pagination.page" />
            <!-- </a-tab-pane>
            </a-tabs> -->
        </template>

    </pageTabelLayout>
</template>
<script setup lang="ts">
import {
    useTable,
    useRowKey,
    useTableColumn,
    usePagination,
    useRowSelection,
} from "@/hooks/table";
import { ref, reactive } from "vue"
import { post, get } from "@/api/http"
import { localeText } from '@/api/aggridZw'

import Toolbar from "@/components/Toolbar.vue"
import { Message, Modal } from "@arco-design/web-vue"
import CorporateSectorCascader from '@/components/corporateSectorCascader/inde.vue'
import { FormInstance } from "@arco-design/web-vue/es/form";
import { pagingList } from "@/api/paging";
import { baseURL } from '../../../../api/axios.config'
import axios from "axios";
const toolbarList: any = ref(['查询'])
let configCascader = ref<{}>({
    corporateWidth: '200px', //公司宽度
    sectorWidth: '200px', //部门宽度
    corporateRquired: false, //公司是否必填
    sectorRquired: false, //部门是否必填
    size: 'mini', //选择框大小'mini' | 'small' | 'medium' | 'large'
    corporateName: '选择部门', //公司label
    sectorName: '选择部门', //部门label
    cascaderShow: 'sector', //配置部门不显示
})
const changeCascader = (data: any) => {
    // const { corporateId } = data
    // whList.value = []
    // searchData.wh = ''
    // searchData.firm = corporateId
    // whService.getWarhouseList(corporateId, '原纱仓')
    pageData.departmentCode = data.corporateId
    pageData.departmentName = data.corporateLabel
}

function PageSize(val: any) {
    pagination.page = val
    doRefresh();
}

function change(val: any) {
    pagination.pageSize = val
    doRefresh();
}
const headerShow = ref(true)
const tableDataList = ref([])


const gridOption = ref()
const gridReady = (params: any) => {
    gridOption.value = params.api
}
const defaultColDef = {
    sortable: true,
    resizable: true,
    filter: true,
}
const localeText1: any = ref(localeText)
const tc = [
    {
        showRowGroup: 'hide_def',
        "headerName": "",
        "checkboxSelection": true,
        "headerCheckboxSelection": true,
        "pinned": "left",
        "width": 50,
        resizable: false,
        filter: false,
        sortable: false,
        minWidth: 50,
        maxWidth: 50,
        lockPosition: "left",
    },
    {
        headerName: '车间',
        field: 'workshop',
        width: 150,
        filter: 'workshop',
    },
    {
        headerName: '工序',
        field: 'process',
        width: 150
    },
    {
        headerName: '标准工艺时间',
        field: 'standardProcessTime',
        width: 150
    },
    {
        headerName: '流转卡号',
        field: 'flowCardCode',
        width: 150
    },
    {
        headerName: '设备编号',
        field: 'machineCode',
        width: 150
    },
    {
        headerName: '管数',
        field: 'tubeType',
        width: 150
    },
    {
        headerName: '染色定价',
        field: 'dyePrice',
        width: 150
    },
    {
        headerName: '工序开始时间',
        field: 'realityBeginTime',
        width: 150
    },
    {
        headerName: '开始员工姓名',
        field: 'beginStaff',
        width: 150
    },
    {
        headerName: '开始员工工号',
        field: 'beginCode',
        width: 150
    },
    {
        headerName: '开始班次',
        field: 'beginClasses',
        width: 150
    },
    // {
    //     headerName: '开始班组',
    //     field: 'beginWorkTeam',
    //     width: 150
    // },
    {
        headerName: '进布时间',
        field: 'clothInTime',
        width: 150
    },
    {
        headerName: '进布金额',
        field: 'clothInAmount',
        width: 150
    },
    // {
    //     headerName: '布号',
    //     field: 'beginGroupUserCode',
    //     width: 150
    // },
    {
        headerName: '开始组长工号',
        field: 'beginGroupUserCode',
        width: 150
    },
    {
        headerName: '开始组长姓名',
        field: 'beginGroupUserName',
        width: 150
    },
    {
        headerName: '开始领班工号',
        field: 'beginClassUserCode',
        width: 150
    },
    {
        headerName: '开始领班姓名',
        field: 'beginClassUserName',
        width: 150
    },
    {
        headerName: '工序结束时间',
        field: 'pieceDate',
        width: 150
    },
    {
        headerName: '结束员工工号',
        field: 'finishCode',
        width: 150
    },
    {
        headerName: '结束员工姓名',
        field: 'finishStaff',
        width: 150
    },
    {
        headerName: '结束班次',
        field: 'finishClasses',
        width: 150
    },
    {
        headerName: '结束班组',
        field: 'endWorkTeam',
        width: 150
    },
    {
        headerName: '出布时间',
        field: 'clothOutTime',
        width: 150
    },
    {
        headerName: '出布金额',
        field: 'clothOutAmount',
        width: 150
    },
    {
        headerName: '结束领班工号',
        field: 'endGroupUserCode',
        width: 150
    },
    {
        headerName: '结束领班姓名',
        field: 'endGroupUserName',
        width: 150
    },
    {
        headerName: '结束组长工号',
        field: 'endClassUserCode',
        width: 150
    },
    {
        headerName: '结束组长姓名',
        field: 'endClassUserName',
        width: 150
    },
    {
        headerName: "创建人",
        field: "createName",
        width: 150
    },
    {
        headerName: "创建时间",
        field: "createTime",
        width: 150
    },
    {
        headerName: "最后修改人",
        field: "updateName",
        width: 150
    },
    {
        headerName: "最后修改时间",
        field: "updateTime",
        width: 150
    },

]

const pageData = reactive<{
    pageLoading: boolean,
    workshop: any,

    beginDate: any,
    endDate: any,
    departmentCode: any,
    departmentName: any,
    formulaCode: any,
    circulatCard: any,
    brandName: any,
    colorCode: any,
    colorName: any,
    process: any,
    userCode: any,
    userName: any,
    deleteState: any,
    page: any,
    size: any,
    nameList: any[],
}>({

    workshop: '',
    departmentCode: '',
    departmentName: '',
    formulaCode: '',
    circulatCard: '',
    brandName: '',
    colorCode: '',
    colorName: '',
    process: '',
    userCode: '',
    userName: '',

    pageLoading: false,
    beginDate: '',
    endDate: '',
    deleteState: 0,
    page: 1,
    size: 10,
    nameList: [],
});
const selectHandler = () => {
    doRefresh()
}

// 查询事件
const total = ref(0);
const pagingList1: any = ref(pagingList)
function doRefresh() {
    pageData.pageLoading = true
    // pageData.page = pagination.page,
    //     pageData.size = pagination.pageSize,
    post({
        url: "/dwPc/PostPiece/getClothInOutAmount",
        // data: {
        //     page: pagination.page,
        //     size: pagination.pageSize,
        //     deleteState: 0,
        // },
        data: pageData,
    })
        .then(({ data, code }: any) => {
            if (code === 200) {

                table.handleSuccess(data);
                gridOption.value.setRowData(data)
                total.value = data.total;

            }
        })
        .catch(console.log).finally(() => {
            pageData.pageLoading = false
        })
}
const pagination = usePagination(doRefresh);
const table = useTable();
// 下拉框
const focusSel = () => {
    selCxAll({ "processName": "" });
}
const options = ref<any>(pageData.nameList);
const loading = ref(false);
const handleSearch = (value: any) => {
    if (value) {
        const ob = { processName: value, deleteState: 0 }
        loading.value = true;
        selCxAll(ob);
        options.value = pageData.nameList;
        loading.value = false;
    } else {
        options.value = []
    }
};
function selCxAll(val: any) {
    post({
        url: "/pdm/worksectionWorkprocedure/select ",
        data: val
    }).then(({ data, code }: any) => {
        if (code === 200) {
            pageData.nameList = data;
        } else {
            Message.error({
                content: "查询失败！",
                duration: 5000,
            });
        }
    });

}
</script>
<script lang="ts">
export default {
    name: "ImportAndExportAmountDemo",
}
</script>
<style scoped lang="less">
:deep(.ag-cell) {
    border-right: 1px solid #dde2eb;
}

:deep(.ag-header-cell) {
    border-right: 1px solid #dde2eb;
}

:deep(.ag-cell-value) {
    user-select: initial;
    -moz-user-select: text;
    -ms-user-select: text;
    -webkit-user-select: text;
}
</style>

